<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局图片库</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        html{
            height: 100%;
        }
        body{
            height: 100%;
            margin: 0;
        }
        header{
            height: 5vh;
            background-color: black;
            text-align: center;
            color: white;
        }
        main{
            display: flex;
            /*flex-direction: row;*/
            flex-wrap: wrap;
        }
        main>a>img{
            /*宽度*/
            flex-basis: 200px;
            flex-grow: 1;
            margin: 5px;
        }
    </style>
</head>
<body>
    <header>图片库</header>
    <main>
        <!--img[属性=属性值]*20-->
        <!--img[src=img/$.jpg]*20-->
        {% for post in posts %}
            <a href="{{ post.docfile.url }}"><img src="{{ post.docfile.url }}" alt="#"></a>
        {% endfor %}



        <!--<img src="img/20.jpg" alt="">-->
    </main>
    <div class="container">
        {% if posts.object_list and posts.paginator.num_pages > 1 %}
            <ul class="pagination">
                <li>
                    <a href="?page=1">首页</a>
                </li>
                {% if posts.has_previous %}
                    <li><a href="?page={{posts.previous_page_number}}">上一页</a></li>
                {% endif %}
                {% if posts.has_next %}
                    <li><a href="?page={{posts.next_page_number}}">下一页</a></li>
                {% endif %}

            </ul>
        {% endif %}
    </div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>